<template>
  <div v-if="visible" class="dia">
    
<slot />
    <hr>
    <input type="button" value="取消" @click="cancelHandle">
    <input type="button" value="确认">
  </div>
</template>

<script>
export default {
  name: '',
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {}
  },
  computed: {},
  created() {},
  methods: {
    cancelHandle() {
      // this.visible = false
      // this.$emit('cancel')
      //  子组件直接更改父组件传过来的数据
      this.$emit('update:visible', false)
    }
  }
}
</script>
<style lang="scss" scoped>
.dia {
  width: 200px;
  height: 300px;
  background-color: pink;
}
</style>
